<template>
  <!-- 门店管理 -->
  <div class="main-box">
    <a-card :bordered="false">
      <a-row :gutter="48">
        <a-col :md="8" :sm="24">
          <div class="filter-container">
            <div class="label">门店名称：</div>
            <div class="input-container">
              <a-input v-model="pagination.storeName" placeholder="请输入门店名称"></a-input>
            </div>
          </div>
        </a-col>
        <a-col :md="8" :sm="24">
          <a-button type="primary" class="btn" @click="onSearch" style="margin-right: 10px;">查询</a-button>
          <a-button class="btn" @click="onReset">重置</a-button>
        </a-col>
        <!-- <div class="filter-container lesseeAdd">
                        <a-button type="primary" class="btn" @click="onSearch">查询</a-button>
                        <a-button class="btn" @click="onReset">重置</a-button>
                    </div> -->

      </a-row>
      <div class="filter-container">
        <template>
          <div>
            <a-button type="primary" @click="add" v-checkBtn="'add:stores'">
              新增门店
            </a-button>
          </div>
        </template>
      </div>
      <a-back-top />
      <div>
        <template>
          <a-table
            :columns="columns"
            :data-source="dataSource"
            bordered
            :loading="loading"
            :rowKey="(record) => { return record.storeId }"
            :scroll="{ x: true }"
            :pagination="false">
            <span slot="action" slot-scope="text, record">
              <a href="javascript:;" @click="onEdit(record)" v-checkBtn="'edit:stores'">更新门店</a>
              <a-divider type="vertical" />
              <a href="javascript:;" @click="onMaintenances(record)" v-checkBtn="'stores:parties:edit'">维护门店</a>
            </span>
          </a-table>
        </template>
      </div>
    </a-card>
    <!-- 门店 -->
    <saveModal v-if="dialog.save" ref="saveModal" @success="tableData" @close="dialog.save = false">
    </saveModal>
    <!--  -->
    <maintainModal v-if="dialog.maintain" ref="maintainModal" @success="tableData" @close="dialog.maintain = false">
    </maintainModal>
  </div>
</template>

<script>

import { getStores } from '@/api/stores'
import saveModal from './save'
import maintainModal from './maintain'
export default {
    components: { saveModal, maintainModal },
    data () {
        return {
            // roleTypeList: [],
            columns: [
                {
                    title: '门店名称',
                    dataIndex: 'storeName',
                    key: 'storeName',
                    align: 'center',
                    width: 200
                },
                {
                    title: '操作',
                    width: '150px',
                    dataIndex: 'action',
                    align: 'center',
                    // fixed: 'right',
                    width: 150,
                    scopedSlots: { customRender: 'action' }
                }
            ],
            dataSource: [],
            dialog: {
                save: false,
                maintain: false
            },
            loading: false,
            pagination: {
                // 分页配置
                // pageSize: 6, // 每页显示的条数
                // showQuickJumper: true, // 是否可以快速跳转到指定页
                // showTotal: total => `共 ${total} 条`, // 显示总条数和当前数据范围
                // current: 1, // 当前页数
                // total: 10, // 总条数
                storeName: ''
                // onChange: this.handlePageChange // 页码改变时的回调函数
            }
        }
    },
    mounted () {
        this.tableData()
    },
    methods: {

        // 搜索
        onSearch () {
            this.pagination.current = 1
            this.pagination.pageSize = 6
            this.tableData()
        },
        // 重置
        onReset () {
            this.pagination = {
                // 分页配置
                // pageSize: 6, // 每页显示的条数
                // showTotal: total => `共 ${total} 条`, // 显示总条数和当前数据范围
                // current: 1, // 当前页数
                // total: 10, // 总条数
                storeName: ''
            }
            this.tableData()
        },

        handlePageChange (page, pageSize) {
            this.pagination.current = page
            this.tableData()
        },
        // 新增
        add () {
            this.dialog.save = true
            this.$nextTick(() => {
                this.$refs.saveModal.open()
            })
        },
        // 编辑
        onEdit (row) {
            this.dialog.save = true
            this.$nextTick(() => {
                this.$refs.saveModal.open('edit').setData(row)
            })
        },
        // 当事人维护门店
        onMaintenances (row) {
            this.dialog.maintain = true
            this.$nextTick(() => {
                this.$refs.maintainModal.open(row)
            })
        },
        tableData () {
            this.loading = true
            getStores(this.pagination).then(res => {
                if (res.code == 200) {
                    this.dataSource = res.data
                    // this.pagination.total = res.data.total
                }
                this.loading = false
            })
        }
    }
}
</script>

<style scoped lang="less" >
.tag-box {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;

    .tag-item {
        margin-bottom: 4px;
    }
}

.main-box {
    width: 100%;
    background-color: #fff;
    overflow: hidden;
    overflow-x: auto;
    white-space: nowrap;
    border-radius: 2px;
}

.send-display-container {
    width: 100%;
    background-color: #ffffff;
    padding: 24px;
}

.filter-container {
    display: flex;
    align-items: center;
    padding-bottom: 24px;
    justify-content: left;

    .label {
        padding-right: 20px;

        white-space: nowrap;
    }

    .input-container {
        width: 300px;
        margin-right: 20px
    }

    .btn {
        margin-right: 20px;
    }
}

.lesseeAdd {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    padding-right: 25px;
}

/deep/ .ant-modal {
    min-width: 700px;
    margin-left: 30%;
}
</style>
